<!-- 综合问卷数据 -->
<template>
  <List
    :loading="loading"
    :total="total"
    :queryParams="queryParams"
    :list="list"
    :column="column"
    @handleChangeTime="handleChangeTime"
    @handleQuery="handleQuery"
    @handleDelete="handleDelete"
  >
    <template #operate="{ scope }">
      <el-button
        type="primary"
        link
        size="small"
        @click.stop="handleDetail(scope.row)"
      >
        详情
      </el-button>
    </template>
  </List>
  <el-dialog v-model="dialog.visible" :title="dialog.title">
    <el-descriptions direction="vertical" :column="1" border>
      <el-descriptions-item
        v-for="(value, key, index) in detail"
        :key="key"
        :label="getDetailKey(key)"
      >
        <span v-if="!Array.isArray(getDetailValue(key, value))">
          {{ getDetailValue(key, value) }}
        </span>
        <div v-else>
          <div
            v-if="index < Object.keys(detail).length - 2"
            style="display: flex; gap: 10px"
          >
            <el-tag v-for="tag in getDetailValue(key, value)" :key="tag">
              {{ tag }}
            </el-tag>
          </div>
          <div v-else>
            {{ getDetailValue(key, value)[0] }}
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>
<script setup>
defineOptions({
  name: "Comprehensive",
  inheritAttrs: false,
});

import List from "@/components/crowd/list";
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";

import ManageAPI from "@/api/manage";

const loading = ref(false);
const total = ref(0);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});
// 接收组件传值
const activeTime = ref(1);

// 表格数据
const list = ref([]);
// 列字段
const column = reactive([
  { label: "评价时间", prop: "create_time" },
  { label: "手机号码", prop: "phone_number" },
  { label: "IP地址", prop: "ip" },
  { label: "评价结果", prop: "result" },
]);

// 详情字段
const detail = ref();

// 弹窗
const dialog = reactive({
  title: "详情",
  visible: false,
});

/** 查询 */
function handleQuery() {
  //   todo 查询列表接口
  loading.value = true;
  const { pageNum, pageSize } = queryParams;

  ManageAPI.getCrowd({
    type_: 4, //必传。类型:1-服务质量评价 2-执法过程评价 3-投诉处置评价 4-综合问卷
    filter_way: activeTime.value, //过滤类型：1-全部 2-最近一周 3-最近一个月 4-最近三个月 5-最近一年 缺省默认为1
    page: pageNum, //必传。当前页码，从1开始
    size: pageSize, //必传。每页显示条目数
  })
    .then((data) => {
      list.value = data.data;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
// 切换时间
function handleChangeTime(value) {
  activeTime.value = value;
  handleQuery();
}
// 删除
function handleDelete(row) {
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true;
      ManageAPI.deleteCrowd({
        id: row.id,
      })
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("删除成功");
            handleQuery();
          } else {
            ElMessage.error(res.data);
          }
        })
        .finally(() => (loading.value = false));
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
}

// 查看详情
function handleDetail(row) {
  const question = QUESTION.slice(3);
  question.map((item, index) => {
    const detail = row.details[index];
    row[item.label] = detail.answer_index || detail.answer_details;
  });
  delete row.id;
  delete row.user_type;
  delete row.type_;
  delete row.details;
  detail.value = row;
  dialog.visible = true;
}
// 详情字段名
function getDetailKey(key) {
  let newKey;
  switch (key) {
    case "user_type_value":
      newKey = "身份";
      break;
    case "browser":
      newKey = "浏览器";
      break;
    default:
      newKey = column.find((item) => item.prop === key)?.label || key;
      break;
  }
  return newKey;
}
// 详情字段值展示
function getDetailValue(key, value) {
  let newValue;
  switch (key) {
    case "result":
      newValue = value === 0 ? "不满意" : "满意";
      break;
    case "create_time":
    case "user_type_value":
    case "ip":
    case "browser":
    case "phone_number":
      newValue = value;
      break;
    default:
      const question = QUESTION.slice(3);
      const options = question.find((item) => item.label === key)?.options;
      newValue = value.split(",").map((item) => {
        const answer_index = ANSWER_DICT.indexOf(item);
        if (answer_index > -1) {
          return options[answer_index];
        } else {
          return item;
        }
      });
      break;
  }
  return newValue;
}

onMounted(() => {
  handleQuery();
});
</script>
